<template>
  <div class="content">
    <van-nav-bar
      fixed
      title="地图找房"
      left-arrow
      class="my-maps"
      @click-left="$router.go(-1)"
    />
    <div id="container">地图</div>
  </div>
</template>

<script>
import { areaMaps } from '@/api/users'
export default {
  name: 'Maps-location',
  components: {},
  props: {},
  data() {
    return {
      bodies: []
    }
  },
  computed: {},
  watch: {},
  async created() {
    const { body } = await areaMaps('AREA|dbf46d32-7e76-1196')

    this.bodies = body
    console.log(this.bodies)
  },
  methods: {},
  mounted() {
    const map = new Window.BMapGL.Map('container')
    const point = new Window.BMapGL.Point(121.496566, 31.410465)
    map.centerAndZoom(point, 10)
    // var content = 'label';
    // var label = new BMapGL.Label(content, {       // 创建文本标注
    // position: point,
    // offset: new BMapGL.Size(10, 20)
    // })
    // map.addOverlay(label);
    // label.setStyle({
    //   // 设置label的样式
    //   color: "#fff",
    //   fontSize: "12px",
    //   border: "1px solid #fff",
    //   backgroundColor: "green"
    // });
    // console.log('1');
    this.bodies.forEach((item) => {
      console.log(1)
      const point = new Window.BMapGL.Point(
        +item.coord.longitude,
        +item.coord.latitude
      )
      console.log(+item.coord.longitud)

      const content = item.label
      const label = new Window.BMapGL.Label(content, {
        // 创建文本标注
        position: point,
        offset: new Window.BMapGL.Size(10, 20)
      })
      map.addOverlay(label) // 将标注添加到地图中
      label.setStyle({
        // 设置label的样式
        color: '#fff',
        fontSize: '12px',
        border: '1px solid #fff',
        backgroundColor: 'green'
      })
    })
    const scaleCtrl = new Window.BMapGL.ScaleControl() // 添加比例尺控件
    map.addControl(scaleCtrl)
    const zoomCtrl = new Window.BMapGL.ZoomControl() // 添加缩放控件
    map.addControl(zoomCtrl)
  }
}
</script>

<style scoped lang="less">
.content {
  position: relative;
  #container {
    position: absolute;
    left: 0px;
    height: 100vh;
    width: 100vw;
  }
  .my-maps {
    z-index: 10;
    background-color: #1cb676;
    /* color: black; */
  }
}
</style>
